<template>
  <el-container>
    <el-aside
      class="bg-white"
      width="400px"
    >
      <!--左侧搜索条件-->
      <div ref="asideTop" class="material-filter-container">
        <el-tabs :stretch="true" value="4" type="border-card" @tab-click="tabClick">
          <el-tab-pane label="待审核"/>
          <el-tab-pane label="已审核"/>
          <el-tab-pane label="已取消"/>
          <el-tab-pane label="有欠款"/>
          <el-tab-pane label="全部"/>
        </el-tabs>
      </div>
      <div ref="asideBottom" class="container-ymm container_tabs">
        <el-row :gutter="10" class="mb-10">
          <el-col :span="20">
            <el-date-picker
              v-model="createTimeInterval"
              type="daterange"
              size="mini"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb-10">
          <el-col :span="19">
            <el-input v-model="search" size="mini" placeholder="输入供应商、SKU查询" class="s-input" prefix-icon="el-icon-search"/>
          </el-col>
          <el-col :span="5">
            <el-button type="primary" size="mini" @click="searchMallOrder">查询</el-button>
          </el-col>
        </el-row>
        <el-row >
          <div ref="listBox" class="list">

            <template v-for="mallOrder in mallOrderList" >
              <div :key="mallOrder.mallOrderId" :class="{ selectMallOrder : mallOrder.selectActivity == 1 }" class="item" @click="selectMallOrder(mallOrder)">
                <!-- <div v-for="mallOrder in mallOrderList" :key="mallOrder.mallOrderId" class="item" @click="selectMallOrder(mallOrder)" :class="{ selectMallOrder :  this.mallOrder&&mallOrder.mallOrderId == this.mallOrder.mallOrderId }"> -->
                <p class="name">{{ mallOrder.orderSourceSrc }}
                <span class="zhuangtai">{{ (mallOrder.orderState == 'WAIT'?'待审批':(mallOrder.orderState=='ALREADY'?'已审批':'已取消')) }}</span></p>
                <el-row type="flex" justify="space-between">
                  <span class="price">￥{{ mallOrder.orderReceipts }}</span><span class="date">{{ mallOrder.createTimeSrc }}</span>
                </el-row>
              </div>
            </template>

          </div>
        </el-row>

        <div v-if="null!=mallOrder" class="p-10 text-center">
          <el-pagination
            v-show="mallOrderListQuery.total>0"
            :current-page="mallOrderListQuery.page"
            :page-sizes="[10,20,30, 50]"
            :page-size="mallOrderListQuery.pageSize"
            :total="mallOrderListQuery.total"
            :pager-count="5"
            layout="prev, pager, next, total, jumper"
            background
            @size-change="mallOrderhandleSizeChange"
            @current-change="mallOrderhandleCurrentChange"
          />

          <!--               layout="total, sizes, prev, pager, next, jumper" -->

        </div>
      </div>

    </el-aside>
    <el-main>
      <div class="container-ymm" style="margin-left:15px;" >
        <div class="pl-30 pr-30">
          <el-row :gutter="10" style="text-align:right" class="pt-15 pb-15">
            <el-col :span="6"/>
            <el-button type="primary" @click="goAdd">新建</el-button>
            <el-button v-show="checkPermission('pas:order:ship')" v-if="null!=mallOrder&&null!=mallOrder.orderState&&mallOrder.orderState==='WAIT'" type="primary" @click="approveFun">审批</el-button>
            <el-button v-show="checkPermission('pas:order:edit')" v-if="null!=mallOrder&&null!=mallOrder.orderState&&mallOrder.orderState==='WAIT'" type="primary" @click="editMallOrder">编辑</el-button>
            <el-button v-show="checkPermission('pas:order:cancel')" v-if="null!=mallOrder&&null!=mallOrder.orderState&&mallOrder.orderState==='WAIT'" type="primary" @click="cancelMallOrder">取消</el-button>
            <!-- <el-button type="primary">打印</el-button> -->
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 15px;border: 1px dashed #eee" />
          <el-row v-if="null!=mallOrder" :gutter="20">
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="订单号">订单号:</div>
                </el-col>
                <el-col :span="17">
                  <div
                    class="shipment_div"
                  >{{ mallOrder.mallOrderNumber }}</div>
                  <!-- | parseTime('{y}-{m}-{d}') -->
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="订单来源">订单来源:</div>
                </el-col>
                <el-col :span="17">
                  <div
                    class="shipment_div"
                  >{{ mallOrder.orderSourceSrc }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label">状态:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">
                    {{ (mallOrder.orderState == 'WAIT'?'待审批':(mallOrder.orderState=='ALREADY'?'已审批':'已取消')) }}
                  </div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="创建时间">创建时间:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ mallOrder.createTime | parseTime }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="用户">用户:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ mallOrder.userName }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="提货方式">提货方式:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ mallOrder.deliveryMode == 1 ? '门店提货':'快递' }}</div>
                </el-col>
              </el-row>
              <el-row :gutter="1"/>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="其他备注">其他备注:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ mallOrder.otherRemark }}</div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row v-if="null!=mallOrder" :gutter="20">
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="其他备注">用户地址:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ mallOrder.address }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="出库单号"/>
                  <!-- 出库单号: -->
                </el-col>
                <el-col :span="17">
                  <div
                    class="shipment_div"
                  />
                  <!-- {{ shipmentObj.outstorageNo?shipmentObj.outstorageNo:"--" }} -->
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="订单备注">订单备注:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ mallOrder.orderRemark }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="销售总额">销售总额:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">￥{{ mallOrder.saleAmount }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="发送状态">优惠总额:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">￥{{ mallOrder.coupon }}</div>
                </el-col>
              </el-row>
            </el-col>

          </el-row>

          <el-row v-if="null!=mallOrder" :gutter="20">
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="收款金额">收款金额:</div>
                </el-col>
                <el-col :span="17">
                  <el-button type="text" class="shipment_div" @click="openReceiptRecord">￥{{ mallOrder.orderReceipts }}</el-button>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="支付方式">支付方式</div>
                  <!-- 出库单号: -->
                </el-col>
                <el-col :span="17">
                  <div
                    class="shipment_div"
                  >{{ mallOrder.payModeSrc }}</div>
                  <!--  -->
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="收款日期">收款日期:</div>
                </el-col>
                <el-col :span="17">
                  <div v-if="mallOrder.receivablesTime !==null" class="shipment_div">{{ mallOrder.receivablesTime | parseTime }}</div>
                  <div v-if="mallOrder.receivablesTime ===null"/>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="支付流水">支付流水:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ mallOrder.payNumber }}</div>
                </el-col>
              </el-row>
            </el-col>

            <!-- <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="发送状态">优惠总额:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">￥{{ mallOrder.coupon }}</div>
                </el-col>
              </el-row>
            </el-col> -->

          </el-row>

          <el-row :gutter="20"/>
        </div>
        <div >
          <div v-if="null!=mallOrder" class="table-ymm">
            <el-table :data="mallOrderItemList" style="width: 100%" border>
              <el-table-column label="分类">
                <template slot-scope="scope">
                  <span style="color:#28A087">{{ scope.row.classificationSrc }}</span>
                </template>
              </el-table-column>
              <el-table-column label="SKU编码">
                <template slot-scope="scope">
                  <span >{{ scope.row.skuCode }}</span>
                </template>
              </el-table-column>
              <el-table-column label="SKU名称">
                <template slot-scope="scope">
                  <span >{{ scope.row.skuName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量">
                <template slot-scope="scope">
                  <span >{{ scope.row.amount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="销售单价">
                <template slot-scope="scope">
                  <span >{{ scope.row.price }}</span>
                </template>
              </el-table-column>
              <el-table-column label="实销单价">
                <template slot-scope="scope">
                  <span >{{ (scope.row.payPrice/scope.row.amount).toFixed(2) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="实销小计">
                <template slot-scope="scope">
                  <span >{{ scope.row.payPrice }}</span>
                  <!-- <span v-if="scope.row.name7=='1'" style="color:#28A087">发货中</span>
                  <span v-else-if="scope.row.name7=='2'" style="color:#F05050">待发货</span>
                  <span v-else> 已发货</span> -->
                </template>
              </el-table-column>

            </el-table>
          </div>
          <div v-if="null!=mallOrder" class="table-ymm-bt">
            <el-pagination
              v-show="mallOrderItemListQuery.total>0"
              :current-page="mallOrderItemListQuery.page"
              :page-sizes="[10,20,30, 50]"
              :page-size="mallOrderItemListQuery.pageSize"
              :total="mallOrderItemListQuery.total"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="mallOrderItemhandleSizeChange"
              @current-change="mallOrderItemhandleCurrentChange"
            />
          </div>
          <component :is="modal" :modal-data="modalData" :modal-static-data="{mallOrder,closeChildAndRefresh}" @close="closeChild" />
        </div>
      </div>
    </el-main>

  </el-container>
</template>

<script>
import { get, post, initModuleHeight } from '@/api/utils'
import { parseTime } from '@/utils/index'
import Approve from './dialog/Approve.vue'
import { getUserInfo } from '@/api/login'
import receiptRecord from './dialog/receiptRecord.vue'
export default {
  data() {
    return {
      modal: null, modalData: {},
      search: null,
      shipmentObj: {},
      mallOrderList: [],
      mallOrderItemList: [],
      createTimeInterval: null,
      tableIndex: 4,
      orderStates: ['WAIT', 'ALREADY', 'CANCEL', 'ARREARS', ''],
      isGetMallOrderItemList: true,
      mallOrderId: 0,
      mallOrder: null,
      mallOrderListQuery: {
        page: 1,
        pageSize: 10,
        keyword: null,
        starTime: null,
        endTime: null,
        shipmentNo: null,
        total: 0,
        time: null,
        pageNumber: null
      },
      mallOrderItemListQuery: {
        page: 1,
        pageSize: 10,
        total: 0,
        keyword: null,
        starTime: null,
        endTime: null,
        shipmentNo: null,
        time: null,
        pageNumber: null
      },
      clientHeight: null,
      module: {
        leftTopTap: {
          size: 0.1,
          height: 0
        },
        leftCenter: {
          size: 0.9,
          height: 0,
          child: {
            top: {
              size: 0.4,
              height: 0
            },
            bottom: {
              size: 0.6,
              height: 0
            }
          }
        }
      }
    }
  },
  watch: {
    clientHeight: function() {
      this.module = initModuleHeight(this.clientHeight, this.module)
      this.resizePageHeight(this.module)
    }
  },
  created() {
    this.getMallOrderList()
    this.getPermission()
    console.log(this.$store)
    console.log('store ---  ' + this.$store.modules)
    console.log('store ---  ' + this.$store.getters.status)
  },
  mounted() {
    const that = this
    that.clientHeight = `${document.documentElement.clientHeight}`
    window.onresize = () => {
      return (() => {
        that.clientHeight = `${document.documentElement.clientHeight}`
      })()
    }
  },
  methods: {

    getMallOrderList() {
      // console.log('---------------'+arguments)
      this.listLoading = true

      if (this.mallOrderListQuery.page === 1) { this.mallOrderList = [] }

      this.mallOrderListQuery.pageNumber =
        (this.mallOrderListQuery.page - 1) * this.mallOrderListQuery.pageSize

      var data = { 'pageNumber': this.mallOrderListQuery.pageNumber, 'pageSize': this.mallOrderListQuery.pageSize }

      if (this.createTimeInterval && this.createTimeInterval.length > 0) {
        data.starTime = parseTime(this.createTimeInterval[0].getTime())
        data.endTime = parseTime(this.createTimeInterval[1].getTime())
      }

      if (this.orderStates[this.tableIndex]) {
        data.orderState = this.orderStates[this.tableIndex]
      }

      if (this.selectStatusValue != null) {
        data.status = this.selectStatusValue
      }

      if (this.search != null) {
        data.keyword = this.search
      }

      get('/wxh-cloud-rest/rest/', '/pas/mallOrder/getMallOrder', data).then(response => {
        if (response.data.status === 'success') {
          // console.log('-------------------------------------------------------------')
          this.mallOrderListQuery.total = response.data.data.total
          var mallOrderList = response.data.data.list
          if (mallOrderList && mallOrderList.length > 0) {
            // console.log('---'+this.isGetMallOrderItemList)
            if (this.isGetMallOrderItemList && mallOrderList && mallOrderList.length > 0) {
              this.mallOrder = response.data.data.list[0]
              this.getMallOrderItemList()
              mallOrderList[0].selectActivity = 1
            }

            mallOrderList = mallOrderList.map((mallOrder) => {
              if (mallOrder) {
                this.processOrderSource(mallOrder)
                if (mallOrder.createTime) {
                  mallOrder.createTimeSrc = parseTime(mallOrder.createTime, '{m}/{d}')
                }

                if (mallOrder.payMode) {
                  if (mallOrder.payMode === '1') {
                    mallOrder.payModeSrc = '支付宝'
                  } else if (mallOrder.payMode === '2') {
                    mallOrder.payModeSrc = '微信'
                  } else if (mallOrder.payMode === '3') {
                    mallOrder.payModeSrc = '公司账号'
                  } else {
                    mallOrder.payModeSrc = mallOrder.payMode
                  }
                }
              }
              return mallOrder
            })
          }

          this.mallOrderList = mallOrderList

          // console.log(response.data.data.list)

          // console.log(this.skuList)
          this.listLoading = false
        } else if (response.data.status === 'token_check_faild') {
          this.$message({
            message: response.data.messge,
            type: 'warning'
          })
          this.listLoading = false
        }
      })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },

    processOrderSource(mallOrder) {
      if (mallOrder) {
        var storeName = mallOrder.storeName ? mallOrder.storeName : ''
        storeName = storeName !== '中心仓' ? storeName : '总部'
        if (mallOrder.orderSource) {
          if (mallOrder.orderSource === '1') {
            mallOrder.orderSourceSrc = 'APP - ' + storeName
          } else if (mallOrder.orderSource === '2') {
            mallOrder.orderSourceSrc = 'APP - ' + storeName
          } else if (mallOrder.orderSource === '3') {
            mallOrder.orderSourceSrc = '小程序'
          } else if (mallOrder.orderSource === '4') {
            mallOrder.orderSourceSrc = '后台 - ' + storeName
          } else if (mallOrder.orderSource === '5') {
            mallOrder.orderSourceSrc = 'APP-网批'
          } else if (mallOrder.orderSource === '6') {
            mallOrder.orderSourceSrc = '采销'
          }
        }
      }
    },

    getMallOrderItemList(page) {
      this.mallOrderItemListQuery.pageNumber =
        ((page || this.mallOrderItemListQuery.page) - 1) * this.mallOrderItemListQuery.pageSize

      var data = { 'mallOrderId': this.mallOrder.mallOrderId, 'pageNumber': this.mallOrderItemListQuery.pageNumber, 'pageSize': this.mallOrderItemListQuery.pageSize }

      get('/wxh-cloud-rest/rest/', '/pas/mallOrderItem/list', data).then(response => {
        if (response.data.status === 'success') {
          // console.log('-------------------------------------------------------------')
          this.mallOrderItemListQuery.total = response.data.data.mallOrderItemCount
          this.mallOrderItemList = response.data.data.mallOrderItemList.map((mallOrderItem) => {
            if (mallOrderItem) {
              if (mallOrderItem.createTime) {
                mallOrderItem.createTime = parseTime(mallOrderItem.createTime, '{m}/{d}')
              }
              if (mallOrderItem.classification) {
                if (mallOrderItem.classification === 1) {
                  mallOrderItem.classificationSrc = '整机'
                } else if (mallOrderItem.classification === 2) {
                  mallOrderItem.classificationSrc = '工具'
                } else if (mallOrderItem.classification === 3) {
                  mallOrderItem.classificationSrc = '辅材'
                } else if (mallOrderItem.classification === 4) {
                  mallOrderItem.classificationSrc = '赠品'
                }
              }
            }
            return mallOrderItem
          })

          // console.log(response.data.data.list)

          // console.log(this.skuList)
          this.listLoading = false
        } else if (response.data.status === 'token_check_faild') {
          this.$message({
            message: response.data.messge,
            type: 'warning'
          })
          this.listLoading = false
        }
      })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },

    closeChild() {
      this.modal = null
      this.getMallOrderList()
    },
    approveFun() {
      this.modalData = { type: '111' }
      this.modal = Approve
    },
    goAdd() {
      this.$router.push('/pas_order/add')
    },
    editMallOrder() {
      this.$router.push({ path: '/pas_order/add', query: { 'mallOrder': { store: { storeId: this.mallOrder.storeId }, payModeItem: { value: this.mallOrder.payMode }, deliveryModeItem: { value: this.mallOrder.deliveryMode }, ...this.mallOrder }, 'mallOrderItemList': this.mallOrderItemList }})
      // this.$router.push({name: '/pas_order/add', params: {'mallOrder': this.mallOrder,'mallOrderItemList':this.mallOrderItemList}})
    },
    // 分页
    mallOrderItemhandleSizeChange(val) {
      this.mallOrderItemListQuery.pageSize = val
      this.getMallOrderItemList()
    },
    // 表格选择
    mallOrderItemhandleCurrentChange(val) {
      this.mallOrderItemListQuery.page = val
      this.getMallOrderItemList()
    },
    // 分页
    mallOrderhandleSizeChange(val) {
      this.mallOrderListQuery.pageSize = val
      this.getMallOrderList()
    },
    // 表格选择
    mallOrderhandleCurrentChange(val) {
      this.mallOrderListQuery.page = val
      this.getMallOrderList()
    },
    searchMallOrder() {
      this.mallOrderListQuery.page = 1
      this.getMallOrderList()
    },
    tabClick(tab, event) {
      this.tableIndex = tab.index
      this.mallOrderListQuery.page = 1
      this.getMallOrderList()
    },
    selectMallOrder(mallOrder) {
      // console.log(mallOrder);

      this.mallOrderList = this.mallOrderList.map((mallOrder_) => {
        if (mallOrder_) {
          if (mallOrder_.mallOrderId === mallOrder.mallOrderId) {
            mallOrder_.selectActivity = 1
          } else {
            mallOrder_.selectActivity = 0
          }
        }
        return mallOrder_
      })
      this.mallOrder = mallOrder
      this.mallOrderItemListQuery.page = 1
      this.getMallOrderItemList()
    },
    cancelMallOrder() {
      this.$confirm('您确定取消当前订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = { 'mallOrderId': this.mallOrder.mallOrderId, 'approvalOrCancel': 'cancel' }
        post('/wxh-cloud-rest/rest/', '/pas/mallOrder/orderApproval', data, { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept': 'application/json' }).then(response => {
          if (response.data.status === 'success') {
            // console.log(response)
            this.$message({
              message: '取消成功'
            })
            this.closeChildAndRefresh()
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        }).catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
        })
      }).catch((e) => {
        console.log(e)
        this.$message({
          type: 'info',
          message: '已取消当前操作'
        })
      })
    },

    closeChildAndRefresh() {
      this.modal = null
      this.mallOrderListQuery.page = 1
      this.getMallOrderList()
      this.isGetMallOrderItemList = true
      this.mallOrderItemList = []
    },

    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下

      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'sidebarStatus') {
          this.userid = arr2[1]
        }
      }

      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo().then(response => {
        if (response.data.status === 'ok') {
          localStorage.setItem(
            this.userid,
            JSON.stringify(response.data.data.permissions)
          )
        }
      })
    },

    checkPermission(value) {
      if (value) {
        if (localStorage.getItem(this.userid) && localStorage.getItem(this.userid).indexOf(value) >= 0) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },

    openReceiptRecord() {
      // 查看收款记录信息
      const self = this
      self.modalData = self.mallOrder
      self.modal = receiptRecord
    },
    resizePageHeight(module) {
      const self = this
      const asideTop = self.$refs.asideTop
      const asideBottom = self.$refs.asideBottom
      const listBox = self.$refs.listBox
      asideTop.style.height = module.leftTopTap.height + 'px'
      asideBottom.style.height = module.leftCenter.height + 'px'
      listBox.style.height = module.leftCenter.child.bottom.height + 'px'
    }
  }
}
</script>

<style >

.list {
  overflow-y: scroll;
  border-top: 1px solid rgb(233, 237, 240);
  border-bottom: 1px solid rgb(233, 237, 240);
}

.shipment_label {
  float: left;
  font-family: 'Microsoft Yahei';
  font-size: 13px;
}

.shipment_div {
  float: left;
  font-family: 'Microsoft Yahei';
  font-size: 13px;
  font-weight: 500;
}
.material-filter-container > .el-row,
.shipment_header {
  border: 1px;
  color: #333;
  line-height: 30px;
}

.el-aside {
  color: #333;
  line-height:18px;
}

.el-main {
  color: #333;
  text-align: center;
  line-height:30px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-container:nth-child(5) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-pagination__total,
.el-pagination__sizes,
.btn-prev,
.el-pager,
.btn-next,
.el-pagination__jump {
  margin-top: 2px !important;
}
.el-pagination {
  line-height: 1px;
  white-space: pre-wrap;
}
.el-table__body tr.current-row > td {
  background-color: #dde9fc;
}

.selectMallOrder{
  background: #f5f9fc;
  padding: 5px;
  font-size: 14px;
}
.zhuangtai{
 float: right;
}
</style>
